﻿@page "/basicText"
@using VectSharp;
@using VectSharp.SVG;

<style>
	table {
		table-layout: fixed;
	}

	td {
		width: 200px;
	}
</style>

<div style="width: 100vw; height: 100vh; position: relative;">
	<div style="width: calc(100% - 400px); height: 100%; position: absolute; top: 0; left: 0; text-align: center">
		<img src="@imgSource" style="max-width: 100%; max-height: 100%; margin-top: 50vh; transform: translate(0, -50%)" />
	</div>

	<div style="width: 400px; height: 100vh; position: absolute; top: 0; right: 0;">
		<MatRadioGroup @bind-Value="@fontFamily" TValue="int">
			<table style="margin-top: 50vh; transform: translate(0, -50%)">

				<tr>
					<td>
						<div style="display: inline-block; position: relative">
							<span class="mdc-floating-label mdc-floating-label--float-above" style="margin-left:0.5em; margin-top: 2em; color: rgba(0, 0, 0, 0.6)">Font family</span><br />
							<MatRadioButton Value="0" TValue="int">Times Roman</MatRadioButton>
						</div>
					</td>
					<td>
						<div style="display: inline-block; position: relative">
							<span class="mdc-floating-label mdc-floating-label--float-above" style="margin-left:0.5em; margin-top: 2em; color: rgba(0, 0, 0, 0.6)">&nbsp;</span><br />
							<MatRadioButton Value="1" TValue="int">Times Bold</MatRadioButton>
						</div>
					</td>
				</tr>

				<tr>
					<td>
						<MatRadioButton Value="2" TValue="int">Times Italic</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="3" TValue="int">Times Bold Italic</MatRadioButton>
					</td>
				</tr>

				<tr>
					<td style="padding: 2.5px"></td>
					<td></td>
				</tr>



				<tr>
					<td>
						<MatRadioButton Value="4" TValue="int">Helvetica</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="5" TValue="int">Helvetica Bold</MatRadioButton>
					</td>
				</tr>

				<tr>
					<td>
						<MatRadioButton Value="6" TValue="int">Helvetica Oblique</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="7" TValue="int">Helvetica Bold Oblique</MatRadioButton>
					</td>
				</tr>

				<tr>
					<td style="padding: 2.5px"></td>
					<td></td>
				</tr>

				<tr>
					<td>
						<MatRadioButton Value="8" TValue="int">Courier</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="9" TValue="int">Courier Bold</MatRadioButton>
					</td>
				</tr>

				<tr>
					<td>
						<MatRadioButton Value="10" TValue="int">Courier Oblique</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="11" TValue="int">Courier Bold Oblique</MatRadioButton>
					</td>
				</tr>

				<tr>
					<td style="padding: 2.5px"></td>
					<td></td>
				</tr>

				<tr>
					<td>
						<MatRadioButton Value="12" TValue="int">Symbol</MatRadioButton>
					</td>
					<td>
						<MatRadioButton Value="13" TValue="int">Zapf Dingbats</MatRadioButton>
					</td>
				</tr>

			</table>
		</MatRadioGroup>
	</div>
</div>

@code {

	private int _fontFamily = 4;
	private int fontFamily
	{
		get
		{
			return _fontFamily;
		}
		set
		{
			_fontFamily = value;
			Render();
		}
	}


	private string imgSource = "";

	protected override Task OnInitializedAsync()
	{
		Render();
		return Task.CompletedTask;
	}

	public void Render()
	{
		Page page = new Page(100, 100);
		Graphics graphics = page.Graphics;

		FontFamily family = FontFamily.ResolveFontFamily((FontFamily.StandardFontFamilies)fontFamily);

		Font font = new Font(family, 15);

		string text = "VectSharp";

		Size size = font.MeasureText(text);

		Point position = new Point(50 - size.Width * 0.5, 50);

		graphics.StrokeText(position, text, font, Colour.FromRgb(0, 80, 44), TextBaselines.Middle, lineJoin: LineJoins.Round);

		graphics.FillText(position, text, font, Colour.FromRgb(0, 178, 115), TextBaselines.Middle);

		using (MemoryStream ms = new MemoryStream())
		{
			page.SaveAsSVG(ms);
			ms.Seek(0, SeekOrigin.Begin);

			using (StreamReader sr = new StreamReader(ms))
			{
				this.imgSource = "data:image/svg+xml;base64," + Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(sr.ReadToEnd()));
			}
		}
	}
}
